<template>
  <div class="latest-articles">
    <div class="page-header">
      <h1>最新文章</h1>
      <p>这里展示了博客的最新发布文章</p>
    </div>
    
    <div class="articles-container">
      <Spin v-if="loading" tip="加载中..." style="display: block; margin: 40px auto;">
        <div style="height: 200px;"></div>
      </Spin>

      <template v-else>
        <div v-if="latestArticles.length === 0" class="no-articles">
          <p>暂无最新文章数据</p>
        </div>
      
      <div v-else class="articles-list">
        <div v-for="article in latestArticles" :key="article.id" class="article-item">
          <div class="article-top">
            <h3 class="article-title">{{ article.title }}</h3>
            <span class="new-badge" v-if="article.isNew">NEW</span>
          </div>
          <div class="article-meta">
            <span class="article-date">{{ article.date }}</span>
            <span class="article-category">分类：{{ article.category.name }}</span>
          </div>
          <p class="article-excerpt">{{ article.excerpt }}</p>
          <div class="article-tags">  
            <span v-for="tag in article.tags" :key="tag" class="tag">{{ tag.name }}</span>
          </div>
          <router-link :to="`/blog/${article.id}`" class="read-more">阅读全文 →</router-link>
        </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { Spin } from 'ant-design-vue'
import { useBlogStore } from '../stores/blog'

// 使用 Pinia store
const blogStore = useBlogStore()

// 最新文章数据
const latestArticles = ref([])

// 计算加载状态
const loading = computed(() => blogStore.isArticlesLoading)

// 获取最新文章数据
const fetchLatestArticles = async () => {
  try {
    const response = await blogStore.getArticles({ page: 1, pageSize: 10 })
    if (response && response.list) {
      latestArticles.value = response.list.map(article => ({
        ...article,
        isNew: isNewArticle(article.date)
      }))
    }
  } catch (error) {
    console.error('获取最新文章失败:', error)
    // 如果API调用失败，设置默认数据
    latestArticles.value = [
      {
        id: '1',
        title: 'Vue3 Composition API 入门指南',
        date: '2023-06-15',
        category: 'Vue3',
        readTime: '8',
        excerpt: '本文介绍Vue3 Composition API的基本概念和使用方法，帮助开发者快速上手。',
        tags: ['Vue3', 'Composition API'],
        isNew: false
      }
    ]
  }
}

// 判断文章是否为新文章（7天内发布）
const isNewArticle = (dateStr) => {
  const articleDate = new Date(dateStr)
  const now = new Date()
  const diffTime = Math.abs(now - articleDate)
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  return diffDays <= 7
}

// 组件挂载时获取数据
onMounted(async () => {
  await fetchLatestArticles()
})
</script>

<style scoped>
.latest-articles {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.articles-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-articles {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.articles-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.article-item {
  padding: 25px;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
}

.article-item:hover {
  background-color: #fafafa;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-item:last-child {
  border-bottom: none;
}

.article-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.article-title {
  font-size: 1.5em;
  margin: 0;
  color: #262626;
  flex: 1;
}

.new-badge {
  background-color: #ff4d4f;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 10px;
  white-space: nowrap;
}

.article-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  color: #999;
  font-size: 0.9em;
}

.article-excerpt {
  color: #666;
  line-height: 1.7;
  margin-bottom: 15px;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  background-color: #f0f0f0;
  color: #666;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.85em;
}

.read-more {
  color: #1890ff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: #40a9ff;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .latest-articles {
    padding: 10px;
  }
  
  .article-title {
    font-size: 1.3em;
  }
  
  .article-meta {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .new-badge {
    margin-left: 5px;
    padding: 2px 6px;
    font-size: 0.7em;
  }
}
</style>